<template>
  <div class="wxWelcomFile">
    <el-form :rules="rules" :model="welFile" label-width="120px" style="margin-top: 10px">
      <el-form-item label="文件标题" prop="title">
        <el-input class="al-width-300" v-model="welFile.title" placeholder="请输入文件标题" maxlength="15"
                  show-word-limit/>
      </el-form-item>
      <el-form-item label="文件描述" prop="note">
        <el-input class="al-width-300" :rows="4"
                  resize="none"
                  type="textarea" v-model="welFile.note" placeholder="请输入文件描述"/>
      </el-form-item>
      <el-form-item label="上传文件" prop="url">
        <wx-file-upload tips="文件大小不超过10M" :limit="1" @success="fileCover"/>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import WxFileUpload from "@/components/wxqy/wxFileUpload/wxFileUpload.vue";
import {formValite} from "@/utils/validate";

export default {
  name: "wxWelcomFile",
  components: {WxFileUpload},
  props: ['model'],
  watch: {
    model: {
      immediate: true,
      handler(val) {
        this.reload(val)
      }
    }
  },
  data() {
    return {
      fileList: [],
      welFile: this.model || {},
      rules: {
        title: [{required: true, message: '请输入文件标题', trigger: 'blur'}],
        url: [{required: true, message: '请上传文件', trigger: 'blur'}]
      }
    }
  },
  methods: {
    reload(file) {
      if (file) {
        this.fileList.push({name: file.name, url: file.url})
      }
    },
    fileCover(file) {
      let {name, url} = file
      this.welFile.name = name
      this.welFile.url = url
      console.log('fileCover',this.welFile)
    },
    findData() {
      return {success: formValite(this.welFile, this.rules,this), data: this.welFile}
    }
  }
}
</script>

<style scoped lang="scss">
.wxWelcomFile {
  ::v-deep.el-form-item {
    margin-bottom: 22px;
  }
}
</style>
